<ion-header>
  <ion-navbar>
    <ion-title class="bp-title">
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Display Currency' | translate }}
      </div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea>
  <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
    <ion-toolbar class="wide-header__title">
      <expandable-header-primary>
        {{ 'Display Currency' | translate }}
      </expandable-header-primary>
    </ion-toolbar>
  </expandable-header>

  <ion-item class="search-container" no-lines padding>
    <ion-input class="search-wrapper" placeholder="{{'Search currency' | translate}}" [(ngModel)]="searchedAltCurrency" (ngModelChange)="findCurrency()"></ion-input>
  </ion-item>
  <ion-list class="settings-list bp-list">
    <ion-item *ngFor="let lastUsedAltCurrency of lastUsedAltCurrencyList" (click)="save(lastUsedAltCurrency)">
      {{ lastUsedAltCurrency.name }}
      <span class="currency" item-end>{{lastUsedAltCurrency.isoCode}}</span>
    </ion-item>
  </ion-list>
  <div class="line-divider"></div>
  <div *ngIf="altCurrencyList[0] && lastUsedAltCurrencyList[0]" padding></div>
  <ion-list class="settings-list bp-list">
    <ion-item *ngFor="let alt of altCurrencyList" (click)="save(alt)">
      {{ alt.name }}
      <ion-note item-end>{{alt.isoCode}}</ion-note>
    </ion-item>
  </ion-list>

  <ion-spinner class="loading" *ngIf="!altCurrencyList[0]" name="crescent"></ion-spinner>

  <ion-infinite-scroll (ionInfinite)="loadAltCurrencies($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>